<template>
  <el-dialog
    :title="!rowItem ? '新建标签组' : '新建标签'"
    :visible.sync="$attrs.visable"
    width="520px"
    :before-close="handleClose"
    append-to-body
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-position="top"
    >
      <template v-if="!rowItem">
        <el-form-item label="分组名称：" prop="name">
          <el-input
            placeholder="输入标签分组名称，限15字以内"
            v-model="form.name"
            @keyup.enter.native="handleQuery"
            maxlength="15"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="标签：" prop="tags">
          <div v-for="(tag, index) in form.tags" :key="index" class="mb-12">
            <el-input
              placeholder="输入标签名称"
              v-model="tag.value"
              maxlength="15"
              show-word-limit
              style="width: 91%"
            />
            <span
              class="deleteiconbox commhover f-16 br_4 c_text ml-12"
              @click="removeTag(index)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </div>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="small"
            @click="handleAdd"
            >新增标签</el-button
          >
        </el-form-item>
      </template>
      <el-form-item v-else label="" prop="tags">
        <div v-for="(tag, index) in form.tags" :key="index" class="mb-12">
          <el-input
            placeholder="输入标签名称"
            v-model="tag.value"
            maxlength="15"
            show-word-limit
            style="width: 91%"
          />
          <span
            class="deleteiconbox commhover f-16 br_4 c_text ml-12"
            @click="removeTag(index)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </div>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          >新增标签</el-button
        >
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer flexbetween">
      <div class="p_footer">
        <span v-if="rowItem"> 所属分组：测试</span>
      </div>
      <div>
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit"
          >确 定</el-button
        >
      </div>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    var validateTag = (rule, value, callback) => {
      console.log("111111", value);
      if (!value.length) {
        callback(new Error("至少添加一个标签"));
      } else {
        let filterOne = value.filter((item) => item.value);
        if (!filterOne.length) {
          callback(new Error("至少添加一个标签"));
        } else {
          callback();
        }
      }
    };
    return {
      loading: false,
      form: {
        name: "",
        tags: [{ value: "" }],
      },
      rules: {
        name: [
          { required: true, message: "请输入分组名称", trigger: "blur" },
          //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        tags: [{ required: true, validator: validateTag, trigger: "blur" }],
      },
    };
  },
  props: {
    rowItem: {
      type: Object,
      default: null,
    },
  },
  created() {
    console.log("openaddL", this.rowItem);
  },
  methods: {
    handleClose() {
      this.$emit("update:visable", false);
    },

    handleAdd() {
      this.form.tags.push({ value: "" });
    },

    removeTag(index) {
      this.form.tags.splice(index, 1);
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.handleClose();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.deleteiconbox {
  display: inline-block;
  border: 1px solid #e9e9e9;
  height: 32px;
  line-height: 28px;
  padding: 0 5px;
}
</style>
